<template>
  <div :class="$style.wrap">
    <Title title="任务基本信息" :title-class="$style.title" style="padding-top:0"></Title>
    <List :column="4" sep=":" :gutter="24" default-value="--">
      <ListItem label="客户类型" :value="info.customerType === 2 || info.customerType === '2' ? '顾客' : '商家'"></ListItem>
      <ListItem label="任务状态" dict-type-code="KQ_TASK_STATUS" :value="info.state"></ListItem>
      <ListItem label="关怀项目" dict-type-code="KQ_CARE_ITEM" :value="info.careItem"></ListItem>
      <ListItem label="关怀对象" :value="info.careObject"></ListItem>
      <ListItem label="电话" :value="info.careObjectPhone"></ListItem>
      <ListItem label="分配坐席" :value="info.handler?`${info.handlerName}(${info.handler})`:''"></ListItem>
      <ListItem label="预约关怀日期" :value="info.agreedCareDate"></ListItem>
      <ListItem label="关怀方式" :value="getCareModeName(info.careMode)"></ListItem>
      <ListItem label="创建人" :value="info.createBy?`${info.createByName}(${info.createBy})`:''"></ListItem>
      <ListItem label="创建时间" :value="info.createTime"></ListItem>
      <ListItem v-if="type==='edit'" :span="24">
        <Title slot="content" title="工单信息" :title-class="$style.title" style="padding-top:10px"></Title>
      </ListItem>
      <ListItem label="工单编号" :value="info.workOrderCode"></ListItem>
      <ListItem label="一级业务类型" :value="workOrderInfo.businessType1Name"></ListItem>
      <ListItem label="二级业务类型" :value="workOrderInfo.businessType2Name"></ListItem>
      <ListItem label="办事处" :value="workOrderInfo.officeName"></ListItem>
      <ListItem label="经销商" :value="workOrderInfo.disName"></ListItem>
      <ListItem label="门店" :value="workOrderInfo.shopName"></ListItem>
      <ListItem label="联系人" :value="workOrderInfo.contactName"></ListItem>
      <ListItem label="联系电话" :value="workOrderInfo.contactPhone"></ListItem>
      <ListItem label="工单坐席" :value="workOrderInfo.createBy?`${workOrderInfo.createrName}(${workOrderInfo.createBy})`:'--'"></ListItem>
    </List>
  </div>
</template>
<script>
import { List, ListItem } from '@/components/List'
import Title from '@/components/Title'
import { ccDict } from '@/api/dataDict'
export default {
  name: 'BaseInfo',
  components: {
    List,
    ListItem,
    Title
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      careModeList: []
    }
  },
  computed: {
    workOrderInfo() {
      return this.info.workOrderRecord || {}
    }
  },
  created() {
    ccDict('CARE_MODE').then(res => {
      this.careModeList = res.data
    })
  },
  methods: {
    getCareModeName(v) {
      if (!v) {
        return ''
      }
      v = v.split(',')
      const t = []
      for (const item of v) {
        for (const v of this.careModeList) {
          if (item.toString() === v.dictCode.toString()) {
            t.push(v.dictName)
          }
        }
      }
      return t.join(',')
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
.title{
  color: rgba(0,0,0,0.85);
  font-size: 16px;
  font-weight: 700;
}
}
</style>
